Intro

Halftone loading effect

Load images with a halftone loading shader effect. You can load them from the top, bottom, left or right directions and with different durations and timings.

And you can set the min and max circle sizes and whether the effect should scale with the viewport.

Demo

Effect on pageload

View of a group if people on a hill in Phou Hua Lon hills in Laos

Or change the direction and trigger with a button

Vibrant Sunflower Bloom in Thai Garden

With some images the effects can get really interesting

Halftoning print through the use of yellow, magenta , and cyan inks as primaries.

Components

  • halftone-shader-loader

    Attributes

    alt-text
    Type: string
    Description:Alt text for image
    animation-delay
    Type: string
    Default:"0s"
    Description:How much delay is required before the animation starts. Can be set in seconds or miliseconds (e.g. "3.5s", "3500ms"). Can be also be set as a number, which will default to miliseconds.
    animation-duration
    Type: string
    Default:"5s"
    Description:How long the animation takes to complete. Can be set in seconds or miliseconds (e.g. "3.5s", "3500ms"). Can be also be set as a number, which will default to miliseconds.
    animation-timing
    Type: string
    Default:"ease"
    Description:The way the animation timing behaves. E.g. "ease-out", "cubic-bezier(0.4, 0, 0.2, 1)", "linear".
    direction
    Type: string
    Default:"up"
    Description:Set in which direction the effect animation moves. Options: "up", "down", "left" and "right".
    id
    Type: string
    Default:// Automatically generated if left empty.
    Description:Id for the component and its canvas.
    max-circle-size
    Type: number
    Default:25
    Description:Controls the maximum diameter of circles in the halftone pattern, measured in pixels.
    min-circle-size
    Type: number
    Default:1
    Description:Controls the minimum diameter of circles in the halftone pattern, measured in pixels.
    scale-with-view-port
    Type: boolean
    Default:true
    Description:Controls whether circle sizes automatically adjust based on the screen/viewport width. When true (responsive) circle sizes scale proportionally with screen size. On a 1200px desktop, circles use your exact pixel values. On an 800px mobile device, circles scale down to approximately 67% of your specified sizes to maintain visual proportion.
    src
    Type: string
    Description:Src for the image upon which the effect is applied.
    trigger
    Type: boolean
    Default:false
    Description:Controls when the halftone reveal animation starts and allows for on-demand triggering of the animation effect.

    Events

    animationStartedTriggers when animation starts (so after animationDelay if delay is set).
    animationEndedTriggers when animation ends.

Inspired by Jean Mazouni Halftone Shader Effect.